@charset "utf-8";
html, body {
    height: 100%;
}
/* 布局开始 */
.wrap {
    margin: 0 auto;
    max-width: 640px;
    min-width: 320px;
}
/* 处理搜索框 */
.search {
    padding: 17px 0 13px 0;
    background-color: #f9f9f9;
    > div {
        position: relative;
        width: 455/640*100%;
        height: 30px;
        margin: 0 auto;
        padding: 0 0 4px 15/640*100%;
        border-bottom: 2px solid #db0000;
    }  
    /* 模拟边框 */
    > div:after,
    > div:before {
        position: absolute;
        bottom: 0;
        width: 2px;
        height: 5px;
        content: " ";
        background-color: #db0000;
    }
    > div:before {
        left: 0;        
    }
    > div:after {
        right: 0;
    }
    span {
        position: relative;
        float: left;
        height: 30px;
        margin-right: 50/455*100%;
        line-height: 30px;
        font-size: 24px;
    }
    span:after {
        position: absolute;
        right: -18px;
        top: 0;
        width: 14px;
        height: 30px;
        background: url('../images/location.png') no-repeat;
        content: " ";
    }
    input {
        float: left;
        height: 30px;
        width: 240/455*100%;
        padding-left: 32px;
        border: none;
        background: url('../images/ipt_bg.png') left center no-repeat;
        background-size: auto 100%;
        line-height: 30px;
        font-size: 22px;
        outline: none;
        // 美化placeholder样式
        &::-webkit-input-placeholder {
            color: #adadad;
        }
        &:-ms-input-placeholder { // IE10+
            color: #adadad;
        }
        &:-moz-placeholder { // Firefox4-18
            color: #adadad;
        }
        &::-moz-placeholder { // Firefox19+
            color: #adadad;
        }
    }
}
/* 广告模块 */
.advert {
    overflow: hidden;
    height: 270/64rem;
    img {
        display: block;
        width: 100%;
    }
}
/* 商品模块 */
.goods-con {
    padding: 0 9px;
    margin-bottom: 11px;
}
.local {
    margin-top: 12px;
    padding: 11px 16/640*100%;
    border: 1px solid #ccccce;
    border-radius: 7px;
    strong {
        float: left;
        width: 320/587*100%;
        height: 40px;
        padding-left: 16px;
        background: #c82829 url('../images/tit_bg.png') right center no-repeat;
        background-size: auto 100%;
        line-height: 40px;
        color: #fff;
        font-size: 20px;
    }
    a {
        float: right;
        color: #717171;
        font-size: 20px;
    }
}
.local-con {
    overflow: hidden;
    > div {
        width: 620/587*100%;
    }
    dl {
        float: left;
        width: 280/620*100%;
        margin: 15px 30/620*100% 0 0;
    }
    dd, dt, a {
        float: left;
    }
    dd {
        width: 100%;
        margin-top: 13px;
    }
    img {
        display: block;
        width: 100%;
        border: 1px solid #c8c9c8;
    }
    dt a {
        position: relative;
    }
    em {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 24px;
        background-color: rgb(0, 0, 0);
        line-height: 24px;
        text-align: center;
        color: #fefcfc;
        font-size: 18px;
        opacity: 0.6;
    }
    a {
        display: block;
        overflow: hidden;
        width: 100%;
        color: #c82829;
        font-size: 16px;
        text-overflow: ellipsis;
        word-break: keep-all;    /* 不换行 */
        white-space: nowrap;    /* 不换行 */
    }
}
/* 底部区域 */
.com-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid #ccccce;
    background: #fff url('../images/nav_bg.png');
    background-size: 100% 100%;
    z-index: 99;
    > a {
        position: relative;
        float: left;
        width: 25%;
        height: 29px;
        padding-top: 56px;
        text-align: center;
        color: #5f626c;
        font-size: 18px;
        &:after {
            position: absolute;
            top: 11px;
            left: 50%;
            width: 62px;
            height: 46px;
            margin-left: -31px;
            background: url('../images/nav_icon.png');
            background-size: 62px;
            content: "";
        }
        &:nth-child(2):after {
            background-position-y: -59px;
        }
        &:nth-child(3):after {
            background-position-y: -114px;            
        }
        &:nth-child(4):after {
            background-position-y: -176px;            
        }
    }
    /* 选中样式 */
    .select {
        color: #c71a1c;
        box-shadow: 0 1px 0 1px #ccccce;
        &:after {
            background: url('../images/nav_icon_select.png');
            background-size: 62px;
        }
    }
}
/* 利用媒体查询处理320~480之间的手机 */
@media screen and (min-width: 320px) and (max-width: 480px) {
    /* 搜索栏 */
    .search {
        span {
            font-size: 18px;
        }
        input {
            font-size: 18px;
        }        
    }
    /* 本地商家 */
    .local {
        a, strong {
            font-size: 18px;
        }
    }
    .local-con {
        em {
            font-size: 16px;
        }
        a {
            font-size: 14px;
        }
    }
    /* 底部导航 */
    .com-footer {
        > a {
            padding-top: 44.8px;
            font-size: 14px;
            &:after {
                position: absolute;
                top: 11px;
                left: 50%;
                width: 49px;
                height: 36px;
                margin-left: -24.5px;
                background: url('../images/nav_icon.png');
                background-size: 49px;
                content: "";
            }
            &:nth-child(2):after {
                background-position-y: -47px;
            }
            &:nth-child(3):after {
                background-position-y: -91px;            
            }
            &:nth-child(4):after {
                background-position-y: -139px;            
            }
        }
        .select {
            box-shadow: 0 1px 0 1px #ccccce;
            &:after {
                background: url('../images/nav_icon_select.png');
                background-size: 49px;
            }
        }
    }
}